<template>
  <div class="head-container">
    <div class="nav f-r-y-c" style="background: rgba(17, 32, 47, 1)">
      <img
        src="@/assets/images/logo.png"
        data-aos="fade-right"
        @click="goUrl(menuList[0])"
      />
      <span style="width: 10px;"></span>
      <Network />
      <div class="f-r-y-c f-right" data-aos="fade-left">
       
        <Language />
        
        <span
          class="connectWallet iconfont icon-qianbao"
          @click="onConnect"
          v-if="!addressStore"
        ></span>
        <span class="wallet-address" @click="onConnect" v-else>{{
          formatAddress(addressStore.address) 
        }}<br><span class="node-title" v-if="userStore().info != undefined && userStore().info.user.nodeLevel>0">{{ t(tempData[userStore().info.user.nodeLevel].title) }}</span> </span>
        <span></span>
        <span
          class="menu iconfont icon-gengduo"
          @click="data.showRight = true"
        ></span>
      </div>
    </div>
    <van-popup
      v-if="data.showRight"
      v-model:show="data.showRight"
      position="top"
      :style="{ width: '50%', height: '100%' }"
    >
      <div class="menu-popup" :data-aos-duration="200" data-aos="fade-left">
        <div class="menu-top">
          <img src="@/assets/images/logo.png" />
          <span
            @click="data.showRight = false"
            class="iconfont icon-guanbi"
          ></span>
        </div>
        <div class="menu-list f-1 f-c-x-c">
          <div v-for="(item, index) in menuList" :key="index" class="menu">
            <div
              :class="[
                'meun-item',
                item.path == $route.path && 'active',
                !item.open && 'noOpen'
              ]"
              :data-aos-duration="String(500 + index * 50)"
              data-aos="fade-left"
              @click="goUrl(item)"
            >
              <span :class="['iconfont', item.icon]"></span>
              <span class="meun-name">{{ item.menuName }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { showToast } from "vant";
import { Contract } from "@/utils/wallet/contract";
import Ethereum from "@/utils/wallet/ethereum";
import { userStore } from "@/stores/modules/user";
import { formatAddress } from "@/utils/kit";
import {  FetchUserInfo } from "../../server/user";
import { useRoute } from "vue-router";
import { IUserInfo } from "../../model/user";
import { useI18n } from "vue-i18n";
import vipb1 from "@/assets/images/svip/vipb1.png";
import vipb2 from "@/assets/images/svip/vipb2.png";
import vipb3 from "@/assets/images/svip/vipb3.png";
 const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const data = reactive({
  showRight: false
});

let tempData = computed(() => {
  return {
    "1": {
      title: t("bronzeNode"),
      icon: vipb1,
      gift:t("node_gitf_1"),
      pool:t("node_pool_1"),
    },
    "2": {
      title: t("silverNode"),
      icon: vipb2,
      gift:t("node_gitf_2"),
      pool:t("node_pool_2"),
    },
    "3": {
      title: t("goldenNode"),
      icon: vipb3,
      gift:t("node_gitf_3"),
      pool:t("node_pool_3"),
    }
  };
});

const menuList = computed(() => {
  return [
    {
      key: 1,
      menuName: t("menu1"),
      path: "/home",
      icon: "icon-shouye",
      open: true
    },
    {
      key: 2,
      menuName: t("menu2"),
      path: "/nft",
      icon: "icon-icon-storage2",
      open: true
    },
    {
      key: 3,
      menuName: t("menu3"),
      path: "/wallet",
      icon: "icon-qianbao",
      open: true
    },
    {
      key: 4,
      menuName: t("menu4"),
      path: "/community",
      icon: "icon-shequ",
      open: true
    },
    {
      key: 5,
      menuName: t("menu5"),
      path: "/invite",
      icon: "icon-lianjie",
      open: true
    },
    {
      key: 6,
      menuName: t("menu6"),
      path: "/ecology",
      icon: "icon-shengtaiquan",
      open: false
    },
    {
      key: 7,
      menuName: t("menu7"),
      path: "/rank",
      icon: "icon-paiming",
      open: true
    },
    {
      key: 8,
      menuName: t("menu8"),
      path: "/welfare",
      icon: "icon-gongyi",
      open: true
    },
    {
      key: 9,
      menuName: t("menu9"),
      path: "/node",
      icon: "icon-web",
      open: true
    },
    {
      key: 10,
      menuName: t("faqTitle"),
      path: "/about",
      icon: "icon-guanyuwomen-copy",
      open: true
    }
  ];
});

const goUrl = item => {
  if (!item.open) return showToast(t("tipsToast"));
  router.push({
    path: item.path
  });
};
const addressStore = userStore();
const onConnect = async () => {
  await Ethereum.init();
  await Contract.init();
  // console.log(route.query)
  // if (route.query.address) {
  //   await Register(route.query.address);
  // }

  await FetchUserInfo<IUserInfo>(route.query.address).then((res)=>{
    userStore().updateInfo(res);
  })
 

  // Contract.transferUSDT("0xfDb36E302FF8A379ED10566002F9AcE18fA576Ee","10")
  if (!addressStore.sign) {
    await Contract.signMessage();
  }
};



onMounted(() => {
  onConnect();
});
</script>
<style lang="scss">
.head-container {
  padding-top: 50px;
  .nav {
    z-index: 9;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50px;
    padding: 0 4vw;
    background-color: #faf3ede0;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 1.066667vw 1.066667vw rgba(0, 0, 0, 0.1);
  }

  .nav > img {
    height: 40px;
  }

  .nav .connectWallet {
    font-size: 28px;
    width: 5.333333vw;
  }

  .nav .menu {
    font-size: 24px;
    margin-left: 4vw;
  }

  .f-right {
    margin-left: auto;
    margin-right: 0;
    display: flex;
    align-items: center;

    .wallet-address {
      color: #f6d664;
      font-weight: bold;
      margin-left: 2vw;
      text-align: center;

      .node-title{
        position: absolute;
    font-size: 10px;
    left: 60%;
    top: -10%;
      }
    }
  }
}

.van-popup--top {
  width: none;
  background: transparent;
  right: 0;
  pointer-events: none;
}

.popup {
  width: 40%;
  top: 0;
  right: 0;
  background: rgba(17, 32, 47, 1);
  z-index: 10001 !important;
}

.menu-popup {
  width: 50.666667vw;
  height: 100vh;
  padding: 4vw;
  background-color: #fff;
  background: rgba(17, 32, 47, 1);
  position: fixed;
  right: 0;
  pointer-events: painted;
}

.menu-popup .menu-top {
  height: 8.717333vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.menu-popup .menu-top img:nth-child(1) {
  height: 40px;
}

.iconfont {
  color: #fff;
}

.menu-popup .menu-top img:nth-child(2) {
  width: 5.866667vw;
  height: 5.466667vw;
}

.menu-popup .menu-list {
  margin-top: 8vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 5vw;
  position: relative;

  .iconfont {
    width: 20px;
    height: 20px;
  }
}

.menu-popup .meun-item {
  height: 30px;
  margin-bottom: 5.333333vw;
  background-color: rgba(17, 32, 47, 0.8);
  flex-shrink: 0;
  font-size: 4.8vw;
  text-align: left;
  line-height: 30px;
  color: #fff;

  .iconfont {
    margin-right: 10px;
  }

  .meun-name {
    font-size: 16px;
  }

  &.noOpen {
    opacity: 0.4;
  }

  &.active {
    .iconfont {
      color: #f0b90b;
    }
    .meun-name {
      color: #f0b90b;
      border-bottom: 2px solid #f0b90b;
      padding-bottom: 5px;
    }
  }
}
</style>
